<style lang="scss"></style>

<template>
  <div class="create-particular-date">
    <el-dialog :close-on-click-modal="false"
      width="30%"
      title="创建特殊日期"
      :visible.sync="dialogVisible"
      :before-close="closeDialog"
    >
      <div v-loading="isLoading" class="body">
        <ParticularDateForm
          ref="form"
          v-model="form"
          :plans="plans"
          :fetch-plans-fn="getPatrolPlans"
          :disabled="isActionDisabled"
        />
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button
          :disabled="isActionDisabled"
          @click="closeDialog"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          :disabled="isActionDisabled"
          :loading="isSubmitting"
          @click="submit"
        >
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { patrolPlans, createParticularDate } from '@/api/watchman'
import dayjs from 'dayjs'
import ParticularDateForm from './ParticularDateForm.vue'
export default {
  components: {
    ParticularDateForm
  },
  props: {
    value: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    return {
      form: {
        date: null,
        plan: null
      },

      plans: [],

      isLoading: false,
      isSubmitting: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value
      },
      set(visible) {
        this.$emit('input', visible)
      }
    },
    isActionDisabled() {
      const { isLoading, isSubmitting } = this
      return isLoading || isSubmitting
    }
  },
  watch: {
    dialogVisible(visible) {
      visible && this.initData()
    }
  },
  methods: {
    sleep(t) {
      return new Promise(r => setTimeout(r, t))
    },
    closeDialog() {
      if (this.isActionDisabled) return

      this.dialogVisible = false
    },
    buildParams() {
      const { date, plan } = this.form
      return {
        date: this.dateFormatter(date),
        class_id: plan
      }
    },
    dateFormatter(date, format = 'YYYY-MM-DD') {
      return dayjs(date).format(format)
    },
    resetForm() {
            this.$refs?.form?.resetForm()
    },

    async submit() {
      try {
        const flag = await this.$refs?.form.validate()
        if (!flag) return

        this.isSubmitting = true
        await this.sleep(300)
        const params = this.buildParams()
        const result = await createParticularDate(params)

        this.isSubmitting = false
        this.resetForm()
        this.$emit('success', result)
      } catch (e) {
        this.isSubmitting = false
        this.$emit('fail', result)
        console.log(e)
      }
    },
    async getPatrolPlans(kw) {
      const params = {
        name: kw,
        paginate:10000
      }

      const result = await patrolPlans(params)
      this.plans = result.data.map(plan => {
        const { id, name } = plan
        return {
          label: name,
          value: id
        }
      })
    },
    async loadData() {
      const result = await Promise.allSettled([
        this.getPatrolPlans()
      ])

      const tasks = result.filter(task => task.status === 'rejected')
      if (tasks.length <= 0) return

      throw tasks.at(0)
    },
    async initData() {
      try {
        this.isLoading = true
        await this.loadData()
        this.isLoading = false
      } catch (error) {
        this.isLoading = false
        console.log(error)
      }
    }
  }
}
</script>
